<template>
  <div class="tooltip-page">
    <div class="group">
      <b-tooltip class="item" placement="top" delay="3">
        <b-button>延迟3s显示</b-button>
        <div slot="content">top 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" placement="top-start" max-length="280px">
        <b-button>max-length</b-button>
        <div slot="content">
          <i class="iconfont icon-swticonzuqiu"></i>max-length top start 提示文字内容，测试文章内容
        </div>
      </b-tooltip>
      <b-tooltip class="item" placement="top-end" @show="show" @hidden="hidden">
        <b-button>测试事件</b-button>
        <div slot="content">测试事件 提示文字内容</div>
      </b-tooltip>

      <b-tooltip class="item" theme="light">
        <b-button width="60px" height="30px">light</b-button>
        <div slot="content">提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" theme="light" placement="top-end">
        <b-button>light</b-button>
        <div slot="content">提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item">
        <b-button>默认</b-button>
        <div slot="content">提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" placement="bottom-start">
        <b-button>bottom start</b-button>
        <div slot="content">bottom start 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" placement="bottom-end">
        <b-button>bottom end</b-button>
        <div slot="content">end end 提示文字内容</div>
      </b-tooltip>
    </div>

    <div class="left">
      <b-tooltip class="item" placement="left">
        <b-button>left</b-button>
        <div slot="content">left 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" placement="left-start">
        <b-button>left start</b-button>
        <div slot="content">left start 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" placement="left-end">
        <b-button>left end</b-button>
        <div slot="content">left end 提示文字内容</div>
      </b-tooltip>
    </div>

    <div class="right">
      <b-tooltip class="item" placement="right">
        <b-button>right</b-button>
        <div slot="content">right 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" placement="right-start">
        <b-button>right start</b-button>
        <div slot="content">right start 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" placement="right-end" always @show="show1" @hidden="hidden1">
        <b-button>always 总是可见的</b-button>
        <div slot="content">always 总是可见的 提示文字内容</div>
      </b-tooltip>
    </div>

    <div class="light">
      <b-tooltip class="item" theme="light">
        <b-button>默认</b-button>
        <div slot="content">提示文字内容</div>
      </b-tooltip>

      <b-tooltip class="item" theme="light" placement="bottom-start">
        <b-button>bottom start</b-button>
        <div slot="content">bottom start 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" theme="light" placement="bottom-end">
        <b-button>bottom start</b-button>
        <div slot="content">bottom start 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" theme="light" placement="top">
        <b-button>top</b-button>
        <div slot="content">top 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" theme="light" placement="top-start">
        <b-button>top</b-button>
        <div slot="content">top start 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" theme="light" placement="top-end">
        <b-button>top</b-button>
        <div slot="content">top end 提示文字内容</div>
      </b-tooltip>

      <div class="left">
        <b-tooltip class="item" theme="light" placement="left">
          <b-button>left</b-button>
          <div slot="content">left 提示文字内容</div>
        </b-tooltip>
        <b-tooltip class="item" theme="light" placement="left-start">
          <b-button>left start</b-button>
          <div slot="content">left start 提示文字内容</div>
        </b-tooltip>
        <b-tooltip class="item" theme="light" placement="left-end">
          <b-button>left end</b-button>
          <div slot="content">left end 提示文字内容</div>
        </b-tooltip>
      </div>
      <div class="right">
        <b-tooltip class="item" theme="light" placement="right">
          <b-button>right</b-button>
          <div slot="content">right 提示文字内容</div>
        </b-tooltip>
        <b-tooltip class="item" theme="light" placement="right-start">
          <b-button>right start</b-button>
          <div slot="content">right start 提示文字内容</div>
        </b-tooltip>
        <b-tooltip class="item" theme="light" placement="right-end">
          <b-button>right end</b-button>
          <div slot="content">right end 提示文字内容</div>
        </b-tooltip>
      </div>
    </div>
    <h4>测试trigger click</h4>
    <div>
      <b-tooltip class="item" theme="light" placement="right" trigger="click">
        <b-button>right</b-button>
        <div slot="content">right 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" theme="light" placement="right-start" trigger="click">
        <b-button>right start</b-button>
        <div slot="content">right start 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" theme="light" placement="right-end" trigger="click">
        <b-button>right end</b-button>
        <div slot="content">right end 提示文字内容</div>
      </b-tooltip>
    </div>
    <h4>trigger focus</h4>
        <div>
      <b-tooltip class="item" theme="light" placement="bottom" trigger="focus">
        <b-input></b-input>
        <div slot="content">bottom 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" theme="light" placement="right-start" trigger="focus">
        <b-input></b-input>
        <div slot="content">right start 提示文字内容</div>
      </b-tooltip>
      <b-tooltip class="item" theme="light" placement="top-start" trigger="focus">
        <b-input></b-input>
        <div slot="content">top-start 提示文字内容</div>
      </b-tooltip>
    </div>
  </div>
</template>
<script>
export default {
  name: "TooltipPage",
  methods: {
    show() {
      console.log("show");
    },
    hidden() {
      console.log("hidden");
    },
    show1() {
      console.log("show");
    },
    hidden1() {
      console.log("hidden");
    },
  },
};
</script>
<style scoped>
.tooltip-page {
  position: relative;
  padding: 40px 0px;
}
.group {
  margin-top: 50px;
}
.item {
  margin-right: 15px;
  margin: 0px 2px 120px 0px;
}
.light {
  /* background: var(--sidebar); */
  margin-top: 50px;
  padding: 50px 20px 0px 0px;
}
.left .item {
  margin-left: 150px;
}
.right .item {
  margin-left: 150px;
}
</style>